<template>
    <div>
        <h1>常用组件1</h1>
        <template v-for="item in btnArr" :key="item">
            <el-button @click="showType(item)" :type="item">按钮</el-button> 
        </template>
        <!-- 如果添加 color 属性，则会替换掉 type 属性的颜色 
         :loading="true"  是否为加载中状态
         :disabled="true" 按钮是否为禁用状态
        -->
        <el-button 
        type="success" 
        color="#04be02" 
        :round="true" 
        :loading="true" 
        :disabled="false"
        >按钮</el-button> 

        <el-button :icon="Plus" :circle="true" type="success"></el-button>

        <el-icon size="30" color="#33f" class="txt"><Open /></el-icon>
        <el-icon size="30" color="#33f" class="txt"><TurnOff /></el-icon>
    </div>
</template>

<script setup lang="ts">
//引入所需要的图标
import {
    Open,
    TurnOff,
    Plus
} from '@element-plus/icons-vue'

//设置所有按钮的类型
let btnArr=['default' , 'primary' , 'success' , 'warning' , 'danger' , 'info' , '' , 'text' ]

const showType=(v:string)=>{
    alert(v)
}
</script>


<style scoped>
.txt{
    border: 1px #f00 solid;
}
</style>